<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0 minimal-ui"/>
	<meta name="apple-mobile-web-app-capable" content="yes"/>
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
  <link rel="stylesheet" type="text/css" href="css/1.css">
  <title>大眼睛</title>
  <style type="text/css">
    body {
      margin: 0;
      padding: 0;
      background: #ececec;
    }
    /*左边的眼睛*/
    .main {
      width: 200px;
      height: 300px;
      position: absolute;
      left: 100px;
      top: 50px;
      background: #0055d4;
      border-radius: 50% 70%;
    }
    .round1 {
      width: 100px;
      height: 150px;
      border-radius: 50% 60%;
      background: white;
      position: absolute;
      left: 90px;
      top: 130px;
    }
    .round2 {
      width: 40px;
      height: 60px;
      border-radius: 50% 80%;
      background: black;
      position: absolute;
      left: 140px;
      top: 190px;
    }
    .round3 {
      width: 10px;
      height: 10px;
      background: white;
      position: absolute;
      left: 150px;
      top: 200px;
      border-radius: 30px;
    }
    /*右边的眼睛*/
    .main1 {
      width: 200px;
      height: 300px;
      position: absolute;
      left: 300px;
      top: 50px;
      background: #0055d4;
      border-radius: 50% 70%;
      transform: rotate(20deg);
      -webkit-transform: rotate(20deg);
    }
    .round4 {
      width: 100px;
      height: 150px;
      border-radius: 50% 60%;
      background: white;
      position: absolute;
      left: 28px;
      top: 138px;
      transform: rotate(-5deg);
      -webkit-transform: rotate(-5deg);
    }
    .round5 {
      width: 40px;
      height: 60px;
      border-radius: 50% 80%;
      background: black;
      position: absolute;
      left: 45px;
      top: 210px;
    }
    .round6 {
      width: 10px;
      height: 10px;
      background: white;
      position: absolute;
      left: 60px;
      top: 218px;
      border-radius: 30px;
    }
    /*鼻子*/
    .nose {
      width: 30px;
      height: 25px;
      border-radius: 50px;
      background: black;
      position: absolute;
      left: 280px;
      top: 340px;
      z-index: 2;
    }
    .noseH {
      width: 5px;
      height: 5px;
      border-radius: 5px;
      background: white;
      position: absolute;
      left: 10px;
      top: 5px;
    }
    /*嘴*/
    .mouth {
      width: 150px;
      height: 100px;
      border-radius: 50% 50%;
      background: red;
      position: absolute;
      left: 245px;
      top: 390px;
    }
    .mouth1 {
      width: 120px;
      height: 80px;
      border-radius: 50% 50%;
      background: #ececec;
      position: absolute;
      left: 225px;
      top: 360px;
      z-index: 1;
    }
	html{font-size:20px}
	@media only screen and (min-width: 401px){
		html {
			font-size: 25px !important;
		}
	}
	@media only screen and (min-width: 428px){
		html {
			font-size: 26.75px !important;
		}
	}
	@media only screen and (min-width: 481px){
		html {
			font-size: 30px !important; 
		}
	}
	@media only screen and (min-width: 569px){
		html {
			font-size: 17.81px !important; 
		}
	}
	@media only screen and (min-width: 641px){
		html {
			font-size: 20px !important; 
		}
	}
	.w100{width:100%;}
	.w100 label{width:3.6rem;text-align:right;display:inline-block;margin-right:10px;font-size:1rem}
	
	#select{width:200px;margin:0 20px;}
	#select option{display:block;text-align:center;}
	#select option.on{background:#f00}
	#select option {
		direction: rtl;
	}
	
	a {
	position: relative;
	display: inline-block;
	outline: none;
	text-decoration: none;
	color: #000;
	font-size: 32px;
	padding: 5px 10px;
}

a:hover::before, a:hover::after { position: absolute; }
a:hover::before { content: "\5B"; left: -20px; }
a:hover::after { content: "\5D"; right:  -20px; }
  </style>
</head>
<body id="content">
	<a href="" style="margin-left:30px;">ssssssss</a>
  <!-- 左边眼睛 -->
  <!-- <div class="main">
    <div class="round1"></div>
    <div class="round2"></div>
    <div class="round3"></div>
  </div> -->
  <!-- 右边的眼睛 -->
  <!-- <div class="main1">
    <div class="round4"></div>
    <div class="round5"></div>
    <div class="round6"></div>
  </div> -->
  <!-- 鼻子 -->
  <!-- <div class="nose">
    <div class="noseH"></div>
  </div> -->
  <!-- 嘴 -->
  <!-- <div class="mouth"></div>
  <div class="mouth1"></div> -->
  <div class="div" style="position:relative">
    <div style="position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);">
		手机手机手机手机手机手机手机手机手机手机手机
	</div>
  </div>
  <div class="w100">
	<form action="">
		<p><label for="">姓名</label><input type="text" value="填写您的姓名"/></p>
		<p><label for="">qq</label><input type="text" /></p>
		<p><label for="">手机</label><input type="text" /></p>
		<p><label for="">爱好</label><input type="text" /></p>
	</form>
  </div>
  
  <div class="boxx" style="width:200px;height:200px;background-clip:content-box;background:#fff;border:1px solid #f00">搜到的搜到的搜到的搜到的搜到的搜到的搜到的搜到的搜到的搜到的搜到的搜到的搜到的</div>
  <select name="" id="select">
  	<option value="">1</option>
  	<option value="">2</option>
  	<option value="">3</option>
  	<option value="">4</option>
  </select>
  <button class="btns">dddd</button>
  <div class="adds" style="width:100%;height:40px;">
	<p>ssss</p>
	<p>dddd</p>
  </div>
  <h1>www <span>dd</span></h1>
  <input type="checkbox" id="btn" value="全选"  ind="666"/>
  <input type="checkbox" id="ddd"/>
  <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
  <script type="text/javascript">
	$(function(){
	
		$('#content').niceScroll({
			cursorcolor: "red",//滚动条的颜色
			cursoropacitymax: 1, //滚动条的透明度，从0-1
			touchbehavior: false, //使光标拖动滚动像在台式电脑触摸设备
			cursorwidth: "5px", //滚动条的宽度
			cursorborder: "0", // 游标边框css定义
			cursorborderradius: "5px",//以像素为光标边界半径  圆角
			autohidemode: false, //是否隐藏滚动条  true的时候默认不显示滚动条，当鼠标经过的时候显示滚动条
			zindex:"auto",//给滚动条设置z-index值
			railpadding: { top:0, right:0, left:0, bottom:0 }//滚动条的位置
		});

	
		$("#btn").on("click",function(){
			var flag = $(this).attr('checked');
			$("#ddd").attr('checked',flag)
			
		});
		
		$(".btns").click(function(){
			$("#select").trigger("mousedown");
		});

		var s = v => v+1; 
		//console.log(s(4));
		
		<!-- 获取url参数 -->
			var http = 'http://www.baidu.com?a=1&b=2' ;
			var str = 'a=1&b=2';
			var arr =str.split('&');
			var obg = {};
				arr.forEach(function(obj,i){
					obg[obj.split('=')[0]] = obj.split('=')[1];
				});
				//console.log(obg) //{a: "1",b:"2"}
				
			function getUrl(name) { 
				var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); //定义正则表达式 
				var ind = path.indexOf('?');
				var r = path.substr(ind+1).match(reg);  
				if (r != null) return unescape(r[2]); 
				return null; 
			}
			var path = "http://www.baidu.com?a=kitty&b=2&c=3";
			var name = getUrl("a"); //kitty
			var age = getUrl("b");   //2
			var sex = getUrl("c");　//3
			var obj1={};
			obj1.name = name;
			obj1.age = age;
			obj1.sex = sex;
			//console.log(obj1);  //{a: "kitty", b: "2", sex: "3"}

		<!--  map，forEach,filter-->
			arr2 = [1,2,3,5];
			var new1 = arr2.map(function(obj,i){
				return obj;
			});
			//console.log(new1); //不改变原数组
			
			arr2.forEach(function(item,index,input){
					input[index] = item*2;
			});
			//console.log(arr2); //改变原数组
			
			var arr = [3,4,5,6,9];
			   
			var newArr = arr.filter(function(item){
			  return item > 5;
			});
			//console.log(newArr);  //不改变原数组
			
			
			
	});
  </script>
</body> 
</html>
